{% block sw_cms_element_cross_selling_config %}
<div class="sw-cms-el-config-cross-selling">
    {% block sw_cms_element_cross_selling_config_tabs %}
    <sw-tabs
        position-identifier="sw-cms-element-cross-selling"
        class="sw-cms-el-config-cross-selling__tabs"
        default-item="content"
    >
        <template #default="{ active }">
            {% block sw_cms_element_cross_selling_config_tab_content %}
            <sw-tabs-item
                name="content"
                :title="$tc('sw-cms.elements.general.config.tab.content')"
                :active-tab="active"
            >
                {{ $tc('sw-cms.elements.general.config.tab.content') }}
            </sw-tabs-item>
            {% endblock %}

            {% block sw_cms_element_cross_selling_config_tab_options %}
            <sw-tabs-item
                name="options"
                :title="$tc('sw-cms.elements.general.config.tab.options')"
                :active-tab="active"
            >
                {{ $tc('sw-cms.elements.general.config.tab.options') }}
            </sw-tabs-item>
            {% endblock %}
        </template>

        <template #content="{ active }">
            {% block sw_cms_element_cross_selling_config_content %}
            <sw-container
                v-if="active === 'content'"
                class="sw-cms-el-config-cross-selling__tab-content"
            >
                {% block sw_cms_element_cross_selling_config_content_warning_text %}
                <mt-banner
                    v-if="isProductPageType"
                    class="sw-cms-el-config-cross-selling__warning-text"
                    variant="info"
                >
                    {{ $tc('sw-cms.elements.crossSelling.config.infoText.productDetailElement') }}
                </mt-banner>
                {% endblock %}

                {% block sw_cms_element_cross_selling_config_content_products %}
                <sw-cms-inherit-wrapper
                    v-if="!isProductPageType"
                    field="product"
                    :element="element"
                    :label="$t('sw-cms.elements.crossSelling.config.label.selection')"
                >
                    <template #default="{ isInherited }">
                        <sw-entity-single-select
                            ref="cmsProductSelection"
                            v-model:value="element.config.product.value"
                            entity="product"
                            class="sw-cms-el-config-cross-selling__products"
                            :placeholder="$tc('sw-cms.elements.crossSelling.config.placeholder.selection')"
                            :criteria="productCriteria"
                            :context="productSelectContext"
                            show-clearable-button
                            :disabled="isInherited"
                            @update:value="onProductChange"
                        >
                            {% block sw_entity_single_select_variant_selected_item %}
                            <template #selection-label-property="{ item }">
                                <sw-product-variant-info
                                    :variations="item.variation"
                                >
                                    {{ item.translated.name || item.name }}
                                </sw-product-variant-info>
                            </template>
                            {% endblock %}

                            {% block sw_entity_single_select_variant_result_item %}
                            <template #result-item="{ item, index }">
                                <sw-select-result
                                    v-bind="{ item, index }"
                                >
                                        {% block sw_entity_single_select_base_results_list_result_label %}
                                    <span class="sw-select-result__result-item-text">
                                        <sw-product-variant-info :variations="item.variation">
                                            {{ item.translated.name || item.name }}
                                        </sw-product-variant-info>
                                    </span>
                                        {% endblock %}
                                </sw-select-result>
                            </template>
                            {% endblock %}
                        </sw-entity-single-select>
                    </template>
                </sw-cms-inherit-wrapper>
                {% endblock %}
            </sw-container>
            {% endblock %}

            {% block sw_cms_element_cross_selling_config_options %}
            <sw-container
                v-else-if="active === 'options'"
                class="sw-cms-el-config-cross-selling__tab-options"
            >
                {% block sw_cms_element_cross_selling_config_options_box_layout %}
                <sw-cms-inherit-wrapper
                    field="boxLayout"
                    :element="element"
                    :label="$t('sw-cms.elements.productBox.config.label.layoutType')"
                >
                    <template #default="{ isInherited }">
                        <mt-select
                            v-model="element.config.boxLayout.value"
                            :options="boxLayoutOptions"
                            :disabled="isInherited"
                        />
                    </template>
                </sw-cms-inherit-wrapper>
                {% endblock %}

                {% block sw_cms_element_cross_selling_config_options_display_mode %}
                <sw-cms-inherit-wrapper
                    field="displayMode"
                    :element="element"
                    :label="$t('sw-cms.elements.general.config.label.displayMode')"
                >
                    <template #default="{ isInherited }">
                        <mt-select
                            v-model="element.config.displayMode.value"
                            :options="displayModeOptions"
                            :disabled="isInherited"
                        />
                    </template>
                </sw-cms-inherit-wrapper>
                {% endblock %}

                {% block sw_cms_element_cross_selling_config_options_min_width %}
                <sw-cms-inherit-wrapper
                    field="elMinWidth"
                    :element="element"
                    :label="$t('sw-cms.elements.crossSelling.config.label.minWidth')"
                >
                    <template #default="{ isInherited }">
                        <mt-text-field
                            v-model="element.config.elMinWidth.value"
                            :placeholder="$tc('sw-cms.elements.crossSelling.config.placeholder.minWidth')"
                            :disabled="isInherited"
                        />
                    </template>
                </sw-cms-inherit-wrapper>
                {% endblock %}

                {% block sw_cms_element_cross_selling_config_options_speed %}
                <sw-cms-inherit-wrapper
                    field="speed"
                    :element="element"
                    :label="$t('sw-cms.elements.general.config.label.speed')"
                >
                    <template #default="{ isInherited }">
                        <mt-number-field
                            v-model="element.config.speed.value"
                            class="sw-cms-el-config-cross-selling__tab-options-speed"
                            number-type="int"
                            :min="0"
                            :max="3600000"
                            :placeholder="$t('sw-cms.elements.general.config.label.speed')"
                            :help-text="$t('sw-cms.elements.general.config.helpText.speed')"
                            :disabled="isInherited"
                        />
                    </template>
                </sw-cms-inherit-wrapper>
                {% endblock %}

            </sw-container>
            {% endblock %}
        </template>
    </sw-tabs>
    {% endblock %}
</div>
{% endblock %}
